<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery-3.3.1.min.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/echarts.min.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/echarts-gl.js"
    ></script>
    <script
      type="application/javascript"
      src="../static/plugins/echarts/china.js"
    ></script>
    <script src="../static/plugins/echarts/echarts-liquidfill.min.js"></script>
    <style>
      .main {
        width: 400px;
        height: 400px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="main" id="main"></div>

    <script>
      var myChart = echarts.init(document.getElementById("main"));

      //value控制水球起伏的波度
      var value = 0.225;
      var data = [];
      data.push(value);
      data.push(value);
      data.push(value);
      data.push(value);
      data.push(value);

      var option = {
        backgroundColor: "#1b2735",
        series: [
          {
            type: "liquidFill",
            //控制水球的大小
            radius: "40%",
            //波长
            waveLength: "80%",
            //波幅
            amplitude: 12,
            animation: true,
            waveAnimation: true,
            data: data,
            color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
            backgroundStyle: {
              borderWidth: 6,
              borderColor: "#294D99",
              color: "rgb(255,0,255,0.01)",
            },
            //水球外边框
            outline: {
              itemStyle: {
                borderColor: "#294D99",
                borderWidth: 2,
              },
              borderDistance: 0,
            },
            label: {
              normal: {
                formatter: value * 100 + "%",
                textStyle: {
                  fontSize: 40,
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    </script>
  </body>
</html>
